<template>
    <div class="main-container">
        <ad-left v-if='$store.state.isPc'></ad-left>
        <div class="main">
            <ul class="ad-tab-comp" style="margin-bottom : 15px;">
                <li :class="formData.ad_type == 1 ? 'active' : ''" @click='typeChange(1)'>場外訂單</li>
                <li :class="formData.ad_type == 2 ? 'active' : ''" @click='typeChange(2)'>擔保訂單</li>
            </ul>
            <ul class="ad-tab-comp" style="margin-bottom : 15px;">
                <li :class="formData.status == 1 ? 'active' : ''" @click='tabChange(1)'>進行中</li>
                <li :class="formData.status == 2 ? 'active' : ''" @click='tabChange(2)'>已完成</li>
                <li :class="formData.status == 3 ? 'active' : ''" @click='tabChange(3)'>已取消</li>
            </ul>
            <el-table 
				:data='table'
                :header-cell-style="{background : '#E5F2FF'}"
				style='width : 1200px; margin: 0 auto;'>
                <!-- <el-table-column type='selection' width='50'></el-table-column> -->
				<el-table-column label='訂單類型' prop='ad_type'></el-table-column>

                <el-table-column label='交易類型' prop='record_type_name' v-if='formData.ad_type == 1'></el-table-column>
                    <el-table-column label='金額' prop='total_price' v-if='formData.ad_type == 1'></el-table-column>
                    <el-table-column label='數量' prop='number' v-if='formData.ad_type == 1' width='140'></el-table-column>
                    <el-table-column label='報價' prop='price' v-if='formData.ad_type == 1'></el-table-column>
                    <el-table-column label='交易狀態' prop='trade_status_name' width='100' v-if='formData.ad_type == 1'></el-table-column>


                <el-table-column label='提供金額' v-if='formData.ad_type == 2'>
                    <template slot-scope="scope">
                        {{scope.row.cur_price}}{{scope.row.cur_currency}}
                    </template>
                </el-table-column>
                <el-table-column label='兌換金額' v-if='formData.ad_type == 2'>
                    <template slot-scope="scope">
                        {{scope.row.price}}{{scope.row.currency}}
                    </template>
                </el-table-column>
                <el-table-column label='創建時間' prop='created_at' width='180'></el-table-column>
                <el-table-column label='過期時間' prop='expired_at' width='180'></el-table-column>
                <el-table-column label='操作' prop='six' width='200'>
                    <template slot-scope="scope">
                        <el-button type='text'>
                            <router-link tag='a' :to='`/chat/${scope.row.id}/${scope.row.ad_id}`' target='_blank' style="color : #409EFF;">
                                聊天
                                <template v-if='scope.row.chat_id'>(New)</template>
                            </router-link>
                        </el-button>
                        <el-button type='text' @click='orderHandle(`confirmPay`, scope.row.id)' v-if='scope.row.is_show_confirm_pay'>確認付款</el-button>
                        <el-button type='text' @click='orderHandle(`buyerConfirmPay`, scope.row.id)' v-if='scope.row.is_buyer_confirm_pay'>確認付款</el-button>
                        <el-button type='text' @click='orderHandle(`sellerConfirmPay`, scope.row.id)' v-if='scope.row.is_seller_confirm_pay'>確認付款</el-button>
                        <el-button type='text' @click='orderHandle(`freshCoin`, scope.row.id)' v-if='scope.row.is_show_free_coin'>放幣</el-button>
                        <el-button type='text' @click='evaOrder(scope.row)' v-if='scope.row.is_show_evaluate'>評价</el-button>
                        <el-button type='text' @click='orderHandle(`cancel`, scope.row.id)' v-if='scope.row.is_show_cancel'>取消</el-button>
                    </template>
                </el-table-column>
			</el-table>
            <div class="center" style="padding : 15px;" v-if='table && table.length'>
                <el-pagination
                    @current-change='pageChange'
                    :page-size ='formData.limit'
                    :total='total'
                    background
                    layout="prev, pager, next">
                </el-pagination>
            </div>
        </div>
        <el-dialog
            :visible.sync='showDialog'
            width="30%">
            <h1 class='eva-title'>交易有何印象，快來點評下吧</h1>
            <div class="radio-container">
                <el-radio-group v-model='eva' size='medium'>
                    <el-radio :label='100'>好評</el-radio>
                    <el-radio :label='50'>中評</el-radio>
                    <el-radio :label='0'>差評</el-radio>
                </el-radio-group>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="evaCancel" size='small'>取 消</el-button>
                <el-button type="primary" @click="evaConfirm" size='small'>確 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import AdLeft from '@c/AdLeft'
    import {UserOrder} from '@/api/user'
    import {EventBus} from  '@/util/eventBus'
    import {OrderHandle, OrderEva} from '@/api/order'
    export default {
        components: {
            AdLeft
        },
        data() {
            return {
                table : null,
                total : null,
                formData :{
                    ad_type : 1,
                    status : 1,//1为进行中,2为交易完成,3为已取消
                    coin_id : null,//币种id
                    page : 1,
                    limit : 10
                },
                eva : 100,
                showDialog : false,
                currentId : null
            };
        },
        created () {
            EventBus.$on('hasNewMessage',(params) =>{
                if (this.table) {
                    this.table.map(item => {
                        if ( params.some(_v => {return _v == item.id})) {
                            item.chat_id = 1
                        }
                    })
                }
                
            })
        },
        destroyed () {
            EventBus.$off('hasNewMessage')
        },
        mounted () {
            this.getMyOrder()
        },
        methods :{
            typeChange (type) {
                this.formData.ad_type = type;
                this.formData.page = 1;
                this.table = null;
                this.getMyOrder();
            },
            checkEnabledCancel (row) {
                //如果订单的ad_user_id == userid，就不能有取消按钮
                if (row.record_type == 2 || row.ad_user_id == this.$store.state.userInfo.user_id) {
                    return false;
                } 
                return true;
            },
            //校验是否显示确认付款按钮
            checkShowPayBtn (row) {
                return row.record_type == 1
            },
            getMyOrder () {
                UserOrder(this.formData)
                    .then(res => {
                        this.total = res.result.count;
                        this.table = res.result.data;
                    })
            },
            pageChange (page) {
                this.formData.page = page;
                this.getMyOrder()
            },
            tabChange (status) {
                this.formData.status = status;
                this.getMyOrder();
            },
            //确认支付
            orderHandle (type , orderId) {
                
                OrderHandle ({
                    id :orderId,
                    operate_type : type
                }).then(res => {
                    this.getMyOrder()
                })
            },
            evaOrder (item) {
                this.showDialog = true;
                this.currentId = item.id;
            },
            evaCancel () {
                this.showDialog = false;
            },
            evaConfirm () {
                OrderEva({
                    id : this.currentId,
                    evaluate_status : this.eva
                }).then(_ => {
                    this.showDialog = false;
                    this.currentId = null;
                    this.getMyOrder()
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    @import url('../../assets/css/_b.less');
    //小屏
    @media screen and (max-width : 670px) {
        .main-container{
            background: #fff;
        }
        .type-select{
            li {
                cursor: pointer;
                padding: 15px 10px;
                font-size: 14px;
            }
            .active {
                color: @mainColor;
            }
        }
    }
    //大屏
    @media screen and (min-width : 670px) {
        .main-container {
            min-width: 1200px;
            margin: 25px auto;
            display: flex;
            justify-content: center;
        }
        .main {
            width: 1140px;
            background: #fff;
            .type-select-container {
                padding: 5px 20px 5px 0;
            }
            .type-select{
                li {
                    cursor: pointer;
                    padding: 15px 50px;
                    font-size: 14px;
                }
                .active {
                    color: @mainColor;
                }
            }
        }
        .eva-title {
            font-size: 24px;
            margin-bottom: 10px;
        }
        .radio-container {
            padding: 10px;
        }
    }
</style>